<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/libs/jquery.js"></script>
</head>

<body>
    <input type="file" id="pic"><button onClick="upload()">上传</button>
    <input type="hidden" name="picture" value="" id="picture" />
    <script>
        function upload() {
            // 获取上传的文件对象：dom对象的files属性
            var file = $("#pic")[0].files[0];
            if (!/image\/\w+/.test(file.type)) //判断获取的是否为图片文件
            {
                alert("请确保文件为图像文件");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            // 图片上传完成后
            reader.onload = function() {
                let base64Str = this.result;
                // 发送网络请求到服务器或者保存在表单的隐藏域中，跟其他数据一起提交到服务器
                $('#picture').val(base64Str);
            }
        }
    </script>
</body>

</html>